<template>
  <div class="calendar">
    <!-- <bignum :num="'k'" /> -->
    <div class="clock">
      <bignum :num="h[0]" />
      <bignum :num="h[1]" />
      <div class="maohao">
        <div></div>
        <div></div>
      </div>
      <bignum :num="m[0]" />
      <bignum :num="m[1]" />
      <div class="maohao">
        <div></div>
        <div></div>
      </div>
      <bignum :num="s[0]" />
      <bignum :num="s[1]" />
    </div>
  </div>
</template>
<script setup>
import bignum from '@/components/common/bignum.vue'
import { onMounted, ref } from 'vue';
const time = ref('')
const h = ref('00')
const m = ref('00')
const s = ref('00')
let timer = null;
function createTime() {
  const date = new Date();
  h.value = zero(date.getHours());
  m.value = zero(date.getMinutes());
  s.value = zero(date.getSeconds());
  time.value = `${h.value} : ${m.value} : ${s.value}`;
}
function zero(num) {
  return num < 10 ? "0" + num : '' + num
}
onMounted(() => {
  timer = setInterval(() => {
    createTime()
  }, 1000);
});
</script>
<style scoped lang="scss">
.clock {
  // width: 650px;
  height: 150px;
  display: flex;
  margin: 10px;
  .big-num{
    margin-right: 10px;
  }
  .maohao {
    margin: 100px 20px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    >div {
      width: 10px;
      height: 10px;
      background-color: #a3fe19;
    }
  }
}
</style>
